<template>
    <div >
        
    <header>
      <van-icon name="arrow-left" @click="back" />
      <van-search v-model="seachval" placeholder="请输入搜索关键词"  @touchstart.native.stop="show = true" />
      <p>搜索</p>
    </header>

    <main>
        <p>历史搜索</p>
        <div class="box">
        暂无搜索历史
        </div>
        <p>热门搜索</p>
        <van-button round type="info" color="rgb(110, 101, 101)" v-for="(item,index) in list" :key="index">{{item.name}}</van-button>
    </main>

    <footer>
        <van-cell></van-cell>
        <van-number-keyboard
        :show="show"
        @blur="show = false"
        />
    </footer>



    </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: '',
      seachval: '',
      list:[
        {
            id:1,
            name:"疫情"
        },
        {
            id:2,
            name:"护照"
        },
        {
            id:3,
            name:"戴口罩"
        },
        {
            id:4,
            name:"德尔塔毒株"
        },
      ]
    };
  },
  mounted () {
    this.show=!this.show
  },
  methods: {
    back(){
      this.$router.go(-1)
    }
  }
};
</script>
<style scoped lang="less">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
    #app{
        header{
            display: flex;
            justify-content: space-around;
            border-bottom: 1px solid rgb(222, 197, 197);
            align-items: center;
          .icon{
            font-size: 26px;
          }
        }
        main{
            p{
                font-size: 16px;
                color:#666666;
                margin-left: 20px;
            }
            .box{
                height: 150px;
                text-align: center;
                line-height: 150px;
                color:#d4c3c3;
                border-bottom: 1px solid rgb(222, 197, 197); 
            }
            .van-button{
                margin-left: 20px;
            }
        }
    }

</style>
